<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            size="small"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="状态:" prop="status">
                  <el-radio-group v-model="formData.status">
                    <el-radio :label="1">发布</el-radio>
                    <el-radio :label="0">草稿</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="标题:" prop="title">
                  <el-input
                    type="text"
                    v-model="formData.title"
                    placeholder="请输入标题"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="分类:" prop="category">
                  <el-select
                    v-model="formData.category"
                    multiple
                    collapse-tags
                    placeholder="请选择分类"
                    style="width: 100%"
                  >
                    <el-option
                      :label="item.title"
                      :value="item.id"
                      v-for="(item, index) in option"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="点击数:" prop="hits">
                  <el-input
                    type="text"
                    v-model="formData.hits"
                    placeholder="请输入点击数"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="封面图:" prop="picture">
                  <uploadimg
                    :imgModel="formData"
                    @deleteimg="picturedel"
                    class="uploaditem"
                    @uploadimgok="pictureok"
                    :multipleopen="multipleopen"
                    :imgList="formData.picture"
                       :filedata='filedata'
                  >
                    <span slot="text">上传的图片大小不得超过10M</span>
                  </uploadimg>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="内容:" prop="content">
                  <UE
                    :defaultMsg="formData.content"
                    :config="config"
                    :id="ue1"
                    ref="ue"
                  ></UE>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>  
        </el-row>
      </div>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import uploadimg from "@/components/uploadimg/uploadimg";
import UE from "@/components/Ueditor";
import { articleCreate, articleUpdate } from "@/api/information";

export default {
  data() {
    return {
        filedata:{category:'article'},
      defaultMsg: "",
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350,
        zIndex: 2021,
      },
      ue1: "ue1",
      showPicker: false,
      multipleopen: true,
      formData: {
        title: "",
        picture: [],
        content: "",
        status: 1,
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        picture: [{ required: true, message: "请上传图片", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        category: [{ required: true, message: "请选择分类", trigger: "blur" }],
        hits: [{ required: true, message: "请输入点击数", trigger: "blur" }],
      },
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
    dialogdata: {
      type: Object,
    },
    option: {
      type: Array,
    },
  },
  components: {
    commonformdialog,
    uploadimg,
    UE,
  },
  methods: {
    changePicker() {
      this.showPicker = !this.showPicker;
    },
    closetextDialog() {
      this.$emit("closedialog");
    },
    //删除图片
    picturedel(index) {
      this.formData.picture.splice(index, 1);
    },
    //上传图片成功
    pictureok(val) {
      if (this.multipleopen) {
        this.formData.picture.push(val.url);
        console.log( this.formData.picture)
      }
    },
    confirmbtn() {
      let content = this.$refs.ue.getUEContent(); // 获取文本框内容
      this.formData.content = content;
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let {title,picture,content,category,hits,status}=this.formData
        let params = {title,picture,content,category,hits,status}


        params.picture = params.picture.join(",");
        params.category = params.category.join(",");
        let data;
        if (this.formType == 0) {
          data = await articleCreate(params);
        } else {
          params.id=this.formData.id
          data = await articleUpdate(params);
        }
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$emit("confirm");
        }
      });
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      }
      if (this.formType == 0) {
        this.formData.hits = Math.floor(Math.random() * (100 - 50 + 1)) + 50;
      }
    },
    dialogdata: function (val) {
      this.$nextTick(() => {
        this.formData = val;
        this.formData.category = this.formData.category.split(",").map(Number);
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  #InputSearch {
    display: none !important;
  }
  .grid-emojis {
    grid-template-columns: repeat(10, 10%) !important;
  }
  .small {
    position: absolute;
    z-index: 9;
    left: -45px;
    top: 30px;
  }
  #ue1 {
    line-height: normal;
  }
}
</style>
